<template>
    <div>
        <div>
            <h3>观众看直播</h3>
        </div>
        <div class="filmvideo">
            <video id="player-container-id" width="414" height="270" preload="auto" playsinline webkit-playsinline>
            </video>
        </div>
    </div>
</template>

<script>
//https://cloud.tencent.com/document/product/881/77877
//1.npm install tcplayer.js
//2.import TCPlayer from 'tcplayer.js';
//  import 'tcplayer.js/dist/tcplayer.min.css';
// import TCPlayer from 'tcplayer.js';
// import 'tcplayer.js/dist/tcplayer.min.css';
// import 'tcplayer.js/dist/tcplayer.min.css';
export default {
    data() {
        return {
            liveInfo: {
                playUrl: "",
                coverUrl: ""
            }
        }
    },
    methods: {
        joinRoom() {
            // eslint-disable-next-line no-undef
            var player = TCPlayer('player-container-id', {
                "autoplay": true,
                "poster": this.liveInfo.coverUrl,
                "width": '660',//视频的显示宽度，请尽量使用视频分辨率宽度
                "height": '490'//视频的显示高度，请尽量使用视频分辨率高度
            }); // player-container-id 为播放器容器 ID，必须与 html 中一致

            console.log(this.liveInfo.playUrl);
            player.src(this.liveInfo.playUrl); // url 播放地址
        }
    },
    mounted() {

        this.liveInfo.playUrl = "http://www.prositech.cn/yjs2103A_Group1/game_111.m3u8";//数据库查询出来
        this.joinRoom();
    }
}
</script>

<style>
.filmvideo {
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>